<template>
    <!-- 信息卡组件 -->
    <div>
        <!-- 作者信息 -->
        <div class="info">
            <!-- 作者昵称 -->
            <div class="name">{{userInfo.name}}</div>
            <!-- 作者简介 -->
            <div class="synopsis">
                <span>{{userInfo.brief}}</span>
            </div>
            <!-- 关注 -->
            <div v-if="!isTb" class="attention" @click="attention()">
                <a>+ 关注</a>&nbsp&nbsp
            </div>
        </div>
    </div>
</template>
<script>
import Axios from 'axios';
import store from '@/store/index.js'
import { getUser,getTb,createdTb } from '@/../api/api.js';
export default {
    props: ['author','authorId'],
    data () {
        return {
            userInfo:{},
            isTb: 1
        };
    },
    created() {
        Axios.all([
            Axios.get(getUser,{
                params: {
                    user_id: this.authorId
                }
            }),
            Axios.get(getTb,{
                params: {
                    user_id: store.state.user.user.user_id,
                    friend_id: this.authorId
                }
            })    
        ])
        .then(Axios.spread((userInfo,friend) => {
            if (userInfo.data.message == "success" && friend.data.message == "success") {
                this.userInfo = userInfo.data.data.user;
                if (store.state.user.user.user_id != this.authorId) {
                    this.isTb = friend.data.data.Tb.length;
                }   
            }
        }))
        .catch(err => {
            console.log(err);
        });
    },
    methods: {
        attention() {
            if (store.state.user.user) {
                Axios.post(createdTb,{
                    user_id: store.state.user.user.user_id,
                    friend_id: this.authorId
                })
                .then(Response => {
                    if (Response.data.message == 'success') {
                        this.isTb = 1;
                        window.alert("关注成功~");    
                    }
                })
                .catch(err => {
                    console.log(err);
                    window.alert('关注失败，请稍后重试！')
                }); 
            }   
            else {
                window.alert("登陆后才能关注哦！");
            }
        }
    },
}
</script>
<style lang='stylus' scoped>
.c-info
    color #747d8c
.center
    text-align center
.info
    width 300px;
    position absolute
    text-align:right 
    right 38px
    bottom 24px
    color #fff
    .name
        font-size 22px
        padding-bottom 6px
    .synopsis
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        padding-bottom 2px
    .attention
        width 60px
        float right
        :hover
            cursor pointer

</style>